<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="filterData.name"
        :placeholder="table.name"
        style="width: 200px;"
        class="filter-item"
      />
      <el-select
        v-model="filterData.class"
        :placeholder="table.class"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in options.classOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="filterData.submitTime"
        :placeholder="table.submitTime"
        clearable
        style="width: 130px;"
        class="filter-item"
      >
        <el-option
          v-for="item in options.timeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="filterData.correctTime"
        :placeholder="table.correctTime"
        style="width: 140px"
        class="filter-item"
      >
        <el-option
          v-for="item in options.timeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        type="primary"
        icon="Search"
        style="margin-left: 80px"
      >
        {{ table.search}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------作业管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="hwSubjectData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.classgrade"
          prop="classgradeName"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.title"
          prop="title"
          width="600px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="viewSubInfo(scope.row)"
            >
              {{ table.viewHw}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>

    
    <!-- --------------------------------------详细信息对话框---------------------------------------------------------------- -->
    <div class="e">
      <el-dialog
        v-model="this.subVisible"
        title="题目"
        width="40%"
      >      
        <el-form :model="this.singleSubject" label-width="120px">
          <el-form-item label="所属班级: " prop="classgradeName">
            <el-input v-model="singleSubject.classgradeName" disabled/>
          </el-form-item>
          <el-form-item label="主题: " prop="title">
            <el-input v-model="singleSubject.title" disabled/>
          </el-form-item>
          <el-form-item label="内容: " prop="content">
            <el-input v-model="singleSubject.content" 
                type="textarea"
                rows="3"
              disabled/>
          </el-form-item>
          <el-form-item label="下载附件"
              v-if="ifHasFile"
            >
            <el-button @click="downloadHw()"><span>下载</span></el-button>
          </el-form-item>
          <el-form-item label="发布时间: " prop="createdTime">
            <el-input v-model="singleSubject.createdTime" disabled/>
          </el-form-item>
          <el-form-item label="更新时间: " prop="updatedTime">
            <el-input v-model="singleSubject.updatedTime" disabled/>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="subVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>


  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
        // 判断此时是否展开题目详细介绍
        subVisible: false,
        filterData: {
            page: 1,
            limit: 10,
            name: '',
            class: '',
            submitTime: "",
            correctTime: ""
        },
        table: {
            number: "序号",
            classgrade: "所属班级",
            title: "主题",
            content: "内容",
            createdTime: "发起时间",
            updatedTime: "更新时间",
            actions: "操作",
            search: "搜索",
            viewHw: "查看作业",
            viewContent: "查看评语"
        },
        options: {
            classOptions: ["小葵花课堂","小菊花课堂","小牡丹课堂"],
            timeOptions: ["今日","一周内","一个月内","一个月前"]
        },
        hwSubjectData: [
          {
          classgrade: "",
          title: "",
          content: "",
          createdTime: "",
          updatedTime: ""
          }
        ],
        singleSubject:"",
        // 判断是否存在文件
        ifHasFile:'',
    })
    onMounted(() => {              
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  methods: {
    getData(){
        var _this = this
        this.$axios
            .post('student/subject/info')
            .then( response => {
                let stateCode = response.headers["state"]
                if(stateCode=="200"){
                    // location.reload()
                    this.hwSubjectData = response.data  
                }
                else if(stateCode==""){
                    // this.$message.success("请求数据异常！")
                }
                else{
                    this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                }

            })
            .catch(function (error){
                let stateCode = error.response.headers["state"]                            
                if(stateCode!=""){
                    _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                }
                else{
                    _this.$message.error("后端异常")
                }
            })
            .then(function (){
                console.log("测试成功")
            }) 
        },
    viewSubInfo(row) {
        this.subVisible = true
        this.singleSubject = row
        if(this.singleSubject.ctype!=0) this.ifHasFile = true;
        else this.ifHasFile = false
    },
    downloadHw(){
        // let formData = new FormData()
        // formData.append('targetId',this.homeworkData.id)
        this.$axios({
          url : '/file/download2',
          method: 'post',
          params:{
            targetId: this.singleSubject.subId
          },
          responseType: 'blob'
        }).then((result)=>{
          if(result.data.size==0) {
            this.$message.error("文件下载失败！！文件不存在")
          }
          var blob = new Blob([result.data], {
                type:
                    'application/octet-stream;charset=utf-8',
              })
                    
        let contentDisposition = result.headers["content-disposition"].split("\\")
        let filename = contentDisposition[contentDisposition.length-1];
        this.$message.success("文件" + filename + "下载成功！")
        
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
  },
    
  mounted() {
    this.getData()
    console.log(this.$route)
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }


  
.e {
    height: 90%;
    width: 100%;
    display: float;
    background-color: bisque;
    box-sizing: border-box;
}


</style>